<template>
  <div class="container">
    <el-row>
      <div class="logo"></div>
      <div class="loginTitle">
        <p>刷脸支付商户端后台</p>
        <p>智慧商业 轻松支付</p>
      </div>
    </el-row>
    <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="0">
      <el-row class="userInput">
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" placeholder="请输入账号" type="text">
            <i slot="prefix">
              <img src="../../assets/images/login/3.png" alt="" width="24"/>
            </i>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" style="margin-top: 12px;">
            <i slot="prefix">
              <img src="../../assets/images/login/4.png" alt="" width="24"/>
            </i>
          </el-input>
        </el-form-item>

        <el-checkbox class="isRememberPwd" v-model="rememberPwd">记住密码</el-checkbox>
      </el-row>
      <el-row class="loginBtn">
        <el-button type="primary" @click="login">登录</el-button>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center">
      <div class="tips">
        如果忘记密码及时和<span style="color: #FD6E05">服务商管理人员</span>联系，重置密码
      </div>
    </el-row>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
import * as loginApi from '@/api/login'

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        account: "",
        password: ""
      },
      userToken: '',
      rules: {
        account: [
          {required: true, message: "请输入账号", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"}
        ]
      },
      rememberPwd: false
    }
  },
  created() {
    const that = this;
    let password = localStorage.getItem('password');
    let account = localStorage.getItem('account');
    if (!password || password === "" || password.length === 0) {
    } else {
      that.loginForm.account = account
      that.loginForm.password = password
      that.rememberPwd = true
    }
    if (this.$store.state.token && this.$store.state.token !== '') {
      this.$router.push('/home')
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    login() {
      const that = this
      if (!this.loginForm.account || !this.loginForm.password) {
        this.$notify.error({
          title: '错误',
          message: "用户名或密码为空",
          showClose: false,
          duration: 1000
        });
      } else {
        const {loginForm} = that;
        loginApi.login(
          loginForm.account,
          loginForm.password
        ).then(res => {
          if (res.data.code !== 200) return;
          that.userToken = res.data.data.token;
          //存储用户信息
          localStorage.setItem("user", JSON.stringify(res.data.data.merchant))
          // that.$store.state.user = {"password": loginForm.password, "account": loginForm.account}
          //记住密码
          if (that.rememberPwd) {
            localStorage.setItem("password", loginForm.password)
            localStorage.setItem("account", loginForm.account)
          } else {
            localStorage.removeItem("password");
            localStorage.removeItem("account")
          }
          that.changeLogin({token: that.userToken})
          that.$router.push('/home');
          that.$notify({
            title: '登陆成功！',
            message: "欢迎用户 " + res.data.data.merchant.name + " 回来",
            type: 'success',
            showClose: false,
            duration: 3000
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.logo {
  width: 100px;
  height: 100px;
  margin: 60px auto 0;
  background: url(../../assets/images/login/2.png) center no-repeat;
  background-size: cover;
}

.loginTitle {
  font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular, sans-serif;
  color: #333333;
  font-weight: 400;
  margin-top: 5px;

  p {
    margin: 0;

    &:first-child {
      font-size: 22px;
      line-height: 30px;
    }

    &:last-child {
      font-size: 14px;
      line-height: 20px;
      margin-top: 8px;
    }
  }
}

.userInput {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  margin-top: 60px;

  & > > > .el-input__inner {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding-left: 36px !important;
  }

  & > > > .el-input__prefix,
  & > > > .el-input__prefix i {
    display: flex;
    align-items: center;
  }

  & > > > .el-checkbox__label {
    opacity: 0.65;
    font-size: 13px;
    color: #333333;
  }

  & > > > .el-form-item__error {
    left: calc(100% - 60px)
  }


  .isRememberPwd {
    float: left;
    margin-left: 10px;
    margin-top: 0;
  }
}

.loginBtn {
  margin-top: 24px;
  padding: 0 15px;

  & > > > .el-button {
    width: 100%;
    height: 42px;
    opacity: 1;
    background: linear-gradient(90deg, rgba(253, 110, 5, 0.66) 10%, #fd6e05 81%);
    border-radius: 21px;
    border: none;
    transition: all .5s ease;

    &:hover,
    &:active {
      filter: brightness(1.1);
      box-shadow: 0 9px 25px -2px rgba(253, 110, 5, 0.41);
    }
  }
}

.tips {
  margin-top: 30vh;
  width: 276px;
  height: 17px;
  opacity: 0.6;
  font-size: 12px;
  font-family: Source Han Sans SC, Source Han Sans SC-Normal, sans-serif;
  color: #333333;
}

</style>
